<template>
  <div class="work_core">
    <!-- 记录显示区域 -->
    <div :style="isEdit == false || ![St_workValue.UNDO, St_workValue.DOING].includes(workObj.status) ? 'height: 100%' : ''" class="work_core_record">
      <WorkRecord @f_recordList="s_recordList" ref="workRecordRef" :workid="workid" />
    </div>

    <!-- 底部意见区域 -->
    <div v-if="isEdit && [St_workValue.UNDO, St_workValue.DOING].includes(workObj.status)" class="work_core_operate">
      <!-- 意见输入区 -->
      <div class="work_core_operate_opinion">
        <a-textarea v-model="workRecord.record" placeholder="请输入处置意见" style="height: 100%" :max-length="1000" />
      </div>
      <!-- 附件上传区 -->
      <div class="work_core_operate_file">
        <Upload label="上传材料" @updatedValueF="updatedValueS" />
      </div>

    </div>

    <!-- 底部按钮区域 -->
    <div v-if="isEdit && [St_workValue.UNDO, St_workValue.DOING].includes(workObj.status)" class="work_core_buttom algin_justity_center">
      <a-button @click="cancel" style="margin-right: 8px"> 取消 </a-button>
      <!-- 保存按钮 -->
      <a-dropdown>
        <a-menu slot="overlay" @click="handleMenuClick">
          <a-menu-item v-for="(item, key) in Tp_crc_work" :key="key">
            {{ item.name }}
          </a-menu-item>
        </a-menu>
        <a-button class="btn_def_color" @click="saveRecord" type="primary"> {{ but_text }} <a-icon type="down" /> </a-button>
      </a-dropdown>
      <a-button v-if="recordList.length > 0" @click="complete" type="primary" style="margin-left: 8px"> 完成 </a-button>
      
    </div>
  </div>
</template>

<script>
import storage from 'store'
import { APP_USER } from '@/store/mutation-types.js'
import { updateWorktype, viewCre_work } from '@/api/correction/cre_work.js'
import { saveCre_work_record } from '@/api/correction/cre_work_record.js'
import { complete } from '@/api/correction/cre_work.js'
import { Tp_crc_work, Tp_crc_workValue } from '@/enumeration/correction/Tp_crc_work.js'
import { St_workValue } from '@/enumeration/St_work.js'

export default {
  props: {
    // 预警信息id
    warnid: {
      type: String,
      require: true,
    },
    // 预警任务id
    workid: {
      type: String,
      require: true,
    },
    // 预警任务id
    isEdit: {
      type: Boolean,
      require: true,
    },
  },
  data() {
    return {
      recordList: [], // 子组件处理意见
      St_workValue: St_workValue, // 社矫预警处置状态
      workObj: {}, // 预警处置任务
      worktype: null, // 预警处置状态
      but_text: '保存', // 操作按钮的问题
      Tp_crc_workValue: Tp_crc_workValue, // 社矫预警处置类型值
      Tp_crc_work: Tp_crc_work, //  社矫预警处置类型
      workRecord: {
        id: undefined,
        record: undefined, // 处置记录
        fileids: undefined, // 处置附件
        userid: undefined, // 记录人
        workid: undefined, // 预警任务id
      },
      currentUser: storage.get(APP_USER), // 登录人信息
    }
  },
  created() {
    this.getWork(this.workid)
    this.workRecord.userid = this.currentUser.userId
    this.workRecord.workid = this.workid
    this.workRecord.id = this.workid + Date.now()
  },
  methods: {
    // 子组件回显处理意见
    s_recordList(recordList) {
      this.recordList = recordList
    },
    // 完成处置任务
    complete() {
      this.$confirm({
        title: '提示',
        content: '是否确认预警任务处置完成？',
        onOk: async () => {
          const { code } = await complete(this.workid)
          if(code == 0) {
            this.$message.success('操作成功')
            this.cancel()
          }
        }
      })
    },
    // 取消关闭抽屉
    cancel() {
      this.$emit('close', true)
    },
    // 查询处置记录对象
    async getWork(workid) {
      const { data } = await viewCre_work(workid)
      if (null == data) {
        this.$message.error('未查询到处置记录')
        this.$emit('close')
        return
      }
      this.workObj = data || []
      this.$emit('f_setStatus', this.workObj.worktype)
    },
    // 处理子按钮下拉
    handleMenuClick(e) {
      console.log('e', e)
      this.but_text = this.Tp_crc_work[e.key].name
      this.worktype = e.key
    },
    // 子组件附件上传回显
    updatedValueS(ids) {
      this.workRecord.fileids = ids
    },
    // 保存处置记录
    async saveRecord() {
      console.log('workRecord', this.workRecord)
      if (!this.workRecord.record) {
        this.$message.warning('请填写处置记录')
        return
      }
      // 1 如果选择了状态, 更新预警处置任务状态 (新了处理任务表状态, 同步更新预警信息表状态)
      if (this.worktype && Tp_crc_workValue.UNDO != this.worktype) {
          const { code } = await updateWorktype(this.workid, this.warnid, this.worktype)
          if (code == 0) {
            // 更新父组件状态
            this.workObj.worktype = this.worktype
            this.$emit('f_setStatus', this.worktype)
          }
        }
      // 2 保存处置意见
      const { code } = await saveCre_work_record(this.workRecord)
      if (code == 0) {
        this.$message.success('保存成功')
        this.$refs.workRecordRef.f_reload()
        
      }
    },
  },
  components: {
    Upload: () => import('@/views/base/Upload.vue'),
    WorkRecord: () => import('@/views/correction/work/WorkRecord.vue'),
  },
}
</script>

<style lang="scss" scoped>
// @import '@assets/css/base/flex.scss';
@import '../../../assets/css/base/flex.scss';
// @import '../../../assets/css/base/button.scss';
// .btn_def_color {
//   background-color: #1890ff;
// }
// .btn_def_color:hover,
// .btn_def_color:focus {
//   background-color: #1890ff;
// }
.work_core {
  // border: 1px solid red;
  height: 90vh;
  &_record {
    border: 1px solid #ccc;
    height: 75%;
    padding: 10px;
    overflow: auto;
  }
  &_operate {
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    height: 16%;
    @extend .space_between;

    &_file,
    &_opinion {
      height: 100%;
      // border: 1px solid red;
    }
    &_opinion {
      width: 70%;
    }
    &_file {
      width: 30%;
      overflow: auto;
    }
  }
  &_buttom {
    // border: 1px solid pink;
    height: 9%;
  }
}
</style>
